<template>
  <div class="PolicyStatistics">
    <div class="PolicyStatistics_Statistics">
      <div class="PolicyStatistics_Statistics_title">
        <h3>项目统计</h3>
        <span></span>
      </div>
      <div class="PolicyStatistics_Statistics_content">
        <div class="PolicyStatistics_Statistics_content_left">
          <div class="PolicyStatistics_Statistics_content_content">
            <!-- @click="toProjectQuery(0,statisticsData[0].place)" -->
            <div class="PolicyStatistics_Statistics_content_content_top">
              <h3 style="color: #f24d3a">{{ statisticsData.projectTotal }}</h3>
              <span>个</span>
            </div>
            <!-- <p>{{ statisticsData[0] && statisticsData[0].place }}</p> -->
            <p>项目</p>
          </div>
          <div class="PolicyStatistics_Statistics_content_content">
            <div class="PolicyStatistics_Statistics_content_content_top">
              <h3 style="color: #f8a231">{{ statisticsData.patentTotal }}</h3>
              <span>个</span>
            </div>
            <!-- <p>{{ statisticsData[1] && statisticsData[1].place }}</p> -->
            <p>专利</p>
          </div>
        </div>
        <div class="PolicyStatistics_Statistics_content_right">
          <div class="PolicyStatistics_Statistics_content_content">
            <div class="PolicyStatistics_Statistics_content_content_top">
              <h3 style="color: #f24d3a">{{ statisticsData.softTotal }}</h3>
              <span>个</span>
            </div>
            <p>软著</p>
          </div>
          <div class="PolicyStatistics_Statistics_content_content">
            <div class="PolicyStatistics_Statistics_content_content_top">
              <h3 style="color: #f8a231">{{ statisticsData.trademarkTotal }}</h3>
              <span>个</span>
            </div>
            <p>商标</p>
          </div>
        </div>
      </div>
    </div>
    <div class="PolicyStatistics_dynamic">
      <div class="PolicyStatistics_Statistics_title">
        <h3>行业之星</h3>
        <span></span>
        <p @click="$router.push('/projectQuery')">查看更多</p>
      </div>
      <div class="PolicyStatistics_dynamic_content">
        <h4
          class="singlerows"
          v-for="(item, index) in dynamicData"
          @click="details(item.companyId, index)"
          :key="index"
        >{{ item.companyName }}</h4>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getProjectIndustryStar,
  getProvinceProjectAmount,
  getMapSummaryInfo
} from "../../api/api.js";
export default {
  name: "PolicyStatistics",
  props: ["mapProvince", "mapCity", "cityType"],
  data() {
    return {
      // 最新动态
      dynamicData: [],
      // 项目统计
      statisticsData: {}
    };
  },
  watch: {
    mapProvince(val) {
      this.getAmount();
      this.getStart();
    }
  },
  mounted() {
    this.getStart();
    this.getAmount();
  },
  methods: {
    async getAmount() {
      this.statisticsData = {};
      let params = {
        province: this.mapProvince,
        city: this.mapCity
      };
      // const { result } = await getProvinceProjectAmount(params);
      const { result } = await getMapSummaryInfo(params);
      // console.log(999, result);
      this.statisticsData = result;
      // for (let i = 0; i < 4; i++) {
      //   this.statisticsData.push(result[i]);
      // }
    },
    async getStart() {
      const { result } = await getProjectIndustryStar({ pageNo: 1 });
      this.dynamicData = result;
    },
    // 跳转至详情
    details(id, index) {
      this.$router.push({
        path: "/enterprise",
        query: {
          id: id
        }
      });
    },
    // 政策查询
    toProjectQuery(type, city) {
      console.log(99999, this.cityType);
      let params = {};
      if (this.cityType === 1 && type !== 0) {
        params.province = city;
      } else if (this.cityType === 2 && type !== 0) {
        params.province = this.mapProvince;
        params.city = city;
      } else if (this.cityType === 3 && type !== 0) {
        params.province = this.mapProvince;
        params.city = this.mapCity;
        params.area = city;
      } else {
      }
      this.$router.push({
        name: "projectQuery",
        query: params
      });
    }
  }
};
</script>

<style lang="less" scoped>
.PolicyStatistics {
  padding: 30px 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  box-shadow: 1px 2px 4px #eee;
  .PolicyStatistics_Statistics_title {
    position: relative;
    h3 {
      font-size: 20px;
      font-weight: 700;
      color: #333;
      position: relative;
      z-index: 1;
    }
    span {
      width: 160px;
      height: 10px;
      background: linear-gradient(270deg, #ffffff, #cbdeff);
      position: absolute;
      bottom: 0;
      left: 0;
    }
    p {
      position: absolute;
      right: 0;
      font-size: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: rgb(68, 162, 255);
      cursor: pointer;
      z-index: 2;
    }
  }
  .PolicyStatistics_Statistics_content {
    overflow: hidden;
    .PolicyStatistics_Statistics_content_left {
      float: left;
    }
    .PolicyStatistics_Statistics_content_right {
      float: right;
    }
    .PolicyStatistics_Statistics_content_content {
      margin-top: 20px;
      cursor: pointer;
      .PolicyStatistics_Statistics_content_content_top {
        line-height: 45px;
        h3 {
          font-size: 32px;
          font-weight: 700;
          display: inline-block;
          margin-right: 10px;
        }
        span {
          font-size: 16px;
          color: #333333;
        }
      }
      p {
        font-size: 16px;
        color: #333333;
      }
    }
  }
  .PolicyStatistics_dynamic {
    margin-top: 40px;
    .PolicyStatistics_dynamic_content {
      margin-top: 30px;
      h4 {
        font-weight: normal;
        font-size: 14px;
        color: #333333;
        margin-bottom: 10px;
        cursor: pointer;
        padding: 4px 0;
        &:hover {
          color: rgb(68, 162, 255);
        }
      }
      p {
        margin-top: 40px;
        height: 40px;
        line-height: 40px;
        background: #ffffff;
        border: 1px solid #daeaf5;
        box-sizing: border-box;
        color: #44a2ff;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
}
</style>
